<template>
  <div>
    App..
    {{ num }}
    <!-- 绑定自定义事件：方式一 -->
    <Child @xxx="handleXxx" @click.native="handleClick" @setNum="setNum" />
    <!-- 绑定自定义事件：方式二 -->
    <Son ref="sonRef" />
  </div>
</template>

<script>
import Child from "./Child.vue";
import Son from "./Son.vue";
/*
  传统DOM事件
    绑定事件：事件名称是固定（有限的名称：click...）
    触发事件：浏览器触发的（自动触发）

  自定义事件（消息发布订阅机制）
    绑定事件：事件名称可以任意的  <Child @事件名="事件回调函数" />
    触发事件：手动触发 this.$emit(事件名称, ...参数)

    作用：用来子向父通信

  给组件绑定的事件，默认都是自定义事件（需要手动触发才能触发）
  绑定事件时加上.native事件修饰符，才会绑定原生DOM事件
*/
export default {
  name: "App",
  components: {
    Child,
    Son,
  },
  methods: {
    handleXxx(...args) {
      console.log("handleXxx()", args);
    },
    handleClick() {
      console.log("handleClick()");
    },
    handleYyy() {
      console.log("handleYyy()");
    },
    setNum() {
      this.num++;
    },
  },
  data() {
    return {
      num: 0,
    };
  },
  mounted() {
    /*
      $once 绑定一次性事件
      $on   绑定持续事件
      $off  解绑事件
      $emit 触发事件
    */
    // 绑定自定义事件
    // this.$refs.sonRef.$on("yyy", this.handleYyy);
    this.$refs.sonRef.$once("yyy", this.handleYyy);
  },
  beforeDestroy() {
    // 解绑自定义事件
    this.$refs.sonRef.$off("yyy", this.handleYyy);
  },
};
</script>

<style></style>
